<template>
	<!-- D:/project/app/ydz-app-uniapp/static/images/knowledge/drugnews -->
	<view class="pagebody">
		<view class="topbox">
			<TopSearch></TopSearch>
		</view>
		<view class="clincontent borderbox bgfff">
			<view class="title pos-rel">
				<view class="fz28 fwbold pos-abs beforelog" style="top: 4rpx;left: 0;">
					新上市
				</view>
				<view class="fz48 fwbold titletext">
					{{news.title}}
				</view>
				<view class=" justify-start align-center mt30">
					<image src="@/static/images/knowledge/drug/maledoctor.jpg"
						style="width: 80rpx;height: 80rpx;border-radius: 50%;" mode=""></image>
					<view class="ml25">
						<view class="flex-row fz32 align-center color303b39">
							{{news.createName}}<image src="@/static/images/knowledge/drug/zs.png"
								style="width: 30rpx;height: 24rpx;margin-left: 8rpx;" mode=""></image>
						</view>
						<view class="flex-row align-center fz24" style="color: #7E8987;">
							发布日期：{{news.createTime}}<image src="@/static/images/knowledge/drug/eye.png"
								style="width: 38rpx;height: 24rpx;margin-left: 42rpx;margin-right: 5rpx;" mode="">
							</image>{{news.hits}}
						</view>
					</view>
				</view>
			</view>
			<view class="newscontent ofhide" v-html="news.content">
			</view>
			<view class=""
				style="color:#7E8987;font-size: 24rpx;font-weight: 500;line-height: 40rpx;margin-top: 24rpx;">
				注：仅供医护人员内部讨论，具体用药请咨询主治医师。药品信息有一定的时效性，想了解最新信息，建议您添加医学顾问或在线免费咨询。
			</view>
			<AdvCom :type='2'></AdvCom>
			<view class="flex-row mt40 align-center">
				<view class="mr20" style="flex-shrink: 0;color: #7E8987;font-size: 28rpx;">
					上一篇:
				</view>
				<view class=" lineclamp1 color303b39"style=" font-size: 28rpx;" @click="tozndetail(downBean.id)">
					{{upBean.title}}
				</view>
			</view>
			<view class="flex-row mt25 align-center">
				<view class="mr20" style="flex-shrink: 0;color: #7E8987;font-size: 28rpx;">
					下一篇:
				</view>
				<view class=" lineclamp1 color303b39"style=" font-size: 28rpx;" @click="tozndetail(downBean.id)">
					{{downBean.title}}
				</view>
			</view>
		</view>
		<view class="news_list">
			<view class="list_head">
				<view class="head_font">
					相关文章
				</view>
			</view>
			<view class="news_array">
				<view class="news_card" @click="tozndetail(item.id)" v-for="(item,index) in xgnewsList" :key="index">
					<view class="news_title">
						{{ item.title }}
					</view>
					<view class="news_content" v-html="transformContent(item.content)">
					</view>
					<view class="news_info">
						<view class="info_font">
							推荐指数: {{item.hits}}
						</view>
						<view class="info_font">
							{{ item.updateTime }}
						</view>
					</view>
				</view>
			</view>
		</view>
		


		<FixedFoot :typeid="2"></FixedFoot>
	</view>
</template>

<script>
	import FixedFoot from '../../layouts/fixedfoot.vue';
	import TopSearch from '../../layouts/topsearch.vue';
	import AdvCom from '../../layouts/advcome.vue';
	import {
			getJapanNews,updateJapanNewsHis,getJapanNewsByid,getjapanUpAndDown
		} from '@/api/api.js'
	export default {
		components: {
			FixedFoot,
			TopSearch,
			AdvCom,
		},
		data() {
			return {
				xgnewsList:[],
				news:{},
				clinicalList:[],
				drugList:[],
				upAndDownList:[],
				upBean:{},
				downBean:{},
			}
		},
		onLoad(option) {
			this.endid = option.id
			this.getNewsById(option.id)
			this.updateNewsHis(option.id);
			this.getUpAndDown(option.id)
		},
		mounted() {
		},
		methods: {
			updateNewsHis(id){
				updateJapanNewsHis(id).then(res => {})
			},
			getUpAndDown(id){
				getjapanUpAndDown(id).then(res => {
					console.log("res：",res)
					if(200 == res.code){
						this.upAndDownList = res.data
						this.upAndDownList.forEach(item=>{
							if("1" == item.type){
								this.upBean = item
							}else{
								this.downBean = item
							}
						})
						console.log("upBean：",this.upBean)
						
						console.log("downBean：",this.downBean)
					}
				})
			},
			getNewsById(id){
				getJapanNewsByid(id).then(res => {
					if(200 == res.code){
						this.news = res.data
						this.getJapanNews()
					}
				})
			},
			getJapanNews() {
				let params = {
						'state':'1',
						'classify':this.news.classify,
						"pageNum": 1,
						"pageSize": 4,
						'orderByColumn':'updateTime',
						'isAsc':'desc',
						'type':this.news.type
				}
				getJapanNews(params).then(res => {
					this.xgnewsList = res.rows
				})
			},
			tozndetail(id){
				uni.navigateTo({
					url: '/pages/serve/zndetail?id='+id
				});
			},
			transformContent(content){
				content = content.replace(/<script[\s\S]*?>[\s\S]*?<\/script>/gi, '')  // 去除 script 标签及内容
						.replace(/<style[\s\S]*?>[\s\S]*?<\/style>/gi, '')    // 去除 style 标签及内容
						.replace(/<img[^>]*>/gi, '')                          // 去除所有 <img> 标签
						.replace(/<\/?[^>]+(>|$)/g, '')                       // 去除其他所有 HTML 标签
						.trim();
						
				if(content.length < 30){
					return content;
				}else{
					return content.substring(0,30) + '...' + '<span style="color:#00977C">[ 详情 ]</span>'
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.pagebody {
		padding-bottom: 136rpx;

		.topbox {
			padding: 20rpx 24rpx;
			background: #fff;
			border-bottom: 1px solid #dedede;
		}

		.clincontent {
			padding: 24rpx;
			border-radius: 0 0 32rpx 32rpx;

			.title {
				padding-bottom: 24rpx;
				border-bottom: 1rpx dashed #DFE2E7;

				.beforelog {
					text-align: center;
					line-height: 48rpx;
					width: 125rpx;
					height: 48rpx;
					background: linear-gradient(90deg, #FFF4E9 0%, #FFEAE9 100%);
					border-radius: 0px 24rpx 24rpx 0px;
					color: #FF5828;
				}

				.titletext {
					color: #303b39;
					line-height: 64rpx;
					text-align: justified;
					text-indent: 150rpx;
				}
			}

			.newscontent {
					color: #293347;
					font-size: 36rpx;
					line-height: 72rpx;
					margin-top: 16rpx;
					margin-bottom: 16rpx;
					text-indent: 36rpx;
				::v-deep h2 {
					color: #00977C;
					font-weight: bold;
					margin-top: 24rpx;
					margin-bottom: 24rpx;
					text-indent: 36rpx;
					font-size: 40rpx;
				}

				::v-deep h3 {
					color: #293347;
					font-weight: bold;
					margin-top: 16rpx;
					font-size: 20rpx;
					margin-bottom: 16rpx;
					text-indent: 36rpx;
				}

				::v-deep h4 {
					color: #293347;
					font-weight: bold;
					margin-top: 16rpx;
					font-size: 18rpx;
					margin-bottom: 16rpx;
					text-indent: 36rpx;
				}

				::v-deep p {
					color: #293347;
					font-size: 36rpx;
					line-height: 72rpx;
					margin-top: 16rpx;
					margin-bottom: 16rpx;
					text-indent: 36rpx;
				}
				::v-deep img {
					text-align: center;
					width: 100%;
				}

				::v-deep a {
					font-size: 18rpx;
					color: #003399;
				}
			}


		}
		.drugcard{
			margin-top: 16rpx;
			padding: 24rpx;
			background: #fff;
			border-radius: 32rpx;
		}
		.news_list{
			margin-top: 16rpx;
			background-color: #FFFFFF;
			border-radius: 16px;
			.list_head{
				border-bottom: 1rpx solid #D7DDDC;
				.head_font{
					padding: 40rpx 0 6rpx 0;
					margin-left: 33rpx;
					font-weight: 600;
					font-size: 40rpx;
					color: #303B39;
					line-height: 40rpx;
					border-bottom: 10rpx solid #00D9B2;
					width: fit-content;
				}
			}
			.news_array{
				padding: 0 24rpx;
				.news_card{
					margin-top: 24rpx;
					padding-bottom: 32rpx;
					border-bottom: 1rpx dashed #D7DDDC;
					.news_title{
						font-weight: 600;
						font-size: 38rpx;
						color: #303B39;
						line-height: 56rpx;
						
						overflow:hidden;  //超出文本隐藏
						text-overflow:ellipsis;  ///超出部分省略号显示
						display:-webkit-box;  //弹性盒模型
						-webkit-box-orient:vertical;  //上下垂直
						-webkit-line-clamp:2;  //自定义行数
					}
					.news_content{
						font-weight: 500;
						font-size: 32rpx;
						color: #576260;
						line-height: 50rpx;
					}
					.news_info{
						display: flex;
						justify-content: space-between;
						margin-top: 32rpx;
						.info_font{
							font-weight: 500;
							font-size: 24rpx;
							color: #7E8987;
						}
					}
				}
			}
		}
	}
</style>